<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏 -->
      <page-tools :show-before="true">
        <template #before> 本社保在缴 公积金在缴 增员 减员 入职离职 </template>
        <template #after>
          <el-button
            type="danger"
            size="mini"
            @click="$router.push('/social_securitys/historicalArchiving')"
          >历史归档</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="$router.push(`/social_securitys/monthStatement?yearMonth=${yearMonth}`)"
          >{{ yearMonth }}报表</el-button>
        </template>
      </page-tools>
      <!-- 筛选组件 -->
      <ScoailTool />
      <!-- 表格 -->
      <el-table
        :data="list"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column prop="username" label="姓名" sortable />
        <el-table-column prop="mobile" label="手机" sortable />
        <el-table-column prop="workNumber" label="工号" sortable />
        <el-table-column
          prop="departmentName"
          label="部门"
          sortable
          width="130"
        />
        <el-table-column prop="timeOfEntry" label="入职时间" sortable />
        <el-table-column prop="leaveTime" label="离职时间" sortable />
        <el-table-column
          prop="participatingInTheCity"
          label="社保城市"
          sortable
          width="180"
        />
        <el-table-column
          prop="providentFundCity"
          label="公积金城市"
          width="180"
        />
        <el-table-column prop="socialSecurityBase" label="社保基数" />
        <el-table-column prop="providentFundBase" label="公积金基数" />
        <el-table-column label="操作">
          <template #default="obj">
            <el-button type="text" size="mini" @click="$router.push(`/social_securitys/detail/${obj.row.id}`)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" style="height:60px">
        <el-pagination
          :total="page.total"
          :page-size="page.pageSize"
          :current-page="page.page"
          layout="prev, pager, next"
          @current-change="pageChange"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import { getSettings, getScoailList } from '@/api/social'
import ScoailTool from './components/socail-tool'
export default {
  components: { ScoailTool },
  data() {
    return {
      list: [],
      page: {
        page: 1, // 页码
        pageSize: 10, // 每页条数
        total: 0
      },
      selectParams: {}, // 筛选
      yearMonth: '' // 年月分
    }
  },
  created() {
    this.getScoailList()
    this.getSettings()
  },
  methods: {
    // 查询企业用户社保列表
    async getScoailList() {
      const { rows, total } = await getScoailList({
        ...this.page,
        ...this.selectParams
      })
      this.list = rows
      this.page.total = total
    },
    // 分页
    pageChange(newPage) {
      this.page.page = newPage
      this.getScoailList()
    },
    // 保存企业社保配置信息
    async getSettings() {
      const { dataMonth } = await getSettings()
      this.yearMonth = dataMonth
    },
    // 子传父筛选
    changSelectParams(selectParams) {
      this.selectParams.departmentChecks = selectParams.departmentChecks
      this.selectParams.providentFundChecks = selectParams.providentFundChecks
      this.selectParams.socialSecurityChecks = selectParams.socialSecurityChecks
      this.page.page = 1
      // 重新渲染页面
      this.getScoailList()
    }
  }
}
</script>

<style>
</style>
